<template>
   <div id="service-root">
        <div id="service">
            <h1>名淘电商还提供哪些服务？</h1>

            <!-- 轮播图 -->

            <div id="box">
                <div id="container" ref='container'>
                    <div
                        v-for="(s,i) in serve"
                        :key="i"
                        class="slide"
                    >
                        <img :src="s.img" class='client'>
                        <p style="font-size:14px;margin-bottom:7px;">{{s.sort}}</p>
                        <p style="font-size:14px;opacity:0.5;margin-bottom:40px;">{{s.representative}}</p>
                        <p style="font-size:20px;line-height:30px;opacity:0.5;text-align: left;">{{s.explain}}</p>
                    </div>
                </div>
            </div>


            <div id="arrow">
                <span class="slip" @click="prev">&lt;</span>
                <span class="slip" @click="next">&gt;</span>
            </div>
        </div>
   </div>
</template>

<script>
export default {
    name:'',
    props:[''],
    data () {
        return {
            serve:[
                {
                    img:'/imgs/about/clients-01.png',
                    sort:'电商代运营服务',
                    representative:"淘宝、天猫等店铺代运营",
                    explain:"名淘电商自成立以来以为全国几千家企业提供网店代运营服务，名淘在全国的网店运营人员达1200多人，强大的运营经验保障您的店铺销量。"
                },
                {
                    img:'/imgs/about/clients-02.png',
                    sort:'品牌策划服务',
                    representative:"电商运营策划、产品营销策划",
                    explain:"名淘品牌策划公司是名淘控股集团旗下的专业策划公司，曾帮助海尔、两面针、健力宝等知名企业完成品牌及产品项目策划。"
                },
                {
                    img:'/imgs/about/clients-03.png',
                    sort:'人才输送服务',
                    representative:"网店运营人才、策划设计人才、跨境电商人才",
                    explain:"名淘电商目前已与签过3000多家企业签订了人才合作协议，帮助众多电商企业组建电商项目团队，为企业输送网店技能人才。"
                },
                {
                    img:'/imgs/about/clients-01.png',
                    sort:'品牌策划服务',
                    representative:"电商运营策划、产品营销策划",
                    explain:"名淘品牌策划公司是名淘控股集团旗下的专业策划公司，曾帮助海尔、两面针、健力宝等知名企业完成品牌及产品项目策划。"
                },
                {
                    img:'/imgs/about/clients-03.png',
                    sort:'人才输送服务',
                    representative:"网店运营人才、策划设计人才、跨境电商人才",
                    explain:"名淘电商目前已与签过3000多家企业签订了人才合作协议，帮助众多电商企业组建电商项目团队，为企业输送网店技能人才。"
                },
            ],
            currentLeft: -408,
            currentIndex:0,
            timer:null,
        };
    },
    components: {},
    mounted() {},
    methods: {
        next(){
            this.currentIndex++;
            if( this.currentIndex >= this.serve.length - 1){
                this.currentIndex = this.serve.length - 2;
            }
            this.$refs.container.style.left = this.currentIndex * this.currentLeft +'px';
        },
        prev(){
            this.currentIndex--;
            if( this.currentIndex <= 0 ){
                this.currentIndex = 0;
            }
            this.$refs.container.style.left = this.currentIndex * this.currentLeft +'px';
        }
    },
}
</script>
<style scoped>
#service-root{
    background-color: #2a2b2b;
    height: 800px;
    margin-bottom: 200px;
}
#service{
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    text-align: center;
    color: white;
    padding: 50px 0;
}
#box{
    width: 100%;
    height: 70%;
    position: relative;
    margin-top: 60px;
    overflow: hidden;
}
#container{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    display: flex;
    justify-content: space-between;   
    transition: all 0.5s;
}
.slide{
    width: 380px;
    height: 100%;
    flex-shrink: 0;
    margin-right: 28px;
    padding: 20px;
}
.client{
    border-radius: 50%;
    margin: 30px 0 20px 0;
}

/* 向左向右点击滑动 */
#arrow{
    width: 200px;
    height: 50px;
    border: 1px solid grey;
    margin: 0 auto;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
}
.slip{
    display: inline-block;
    width: 50%;
    height: 100%;
    font-size: 40px;
    line-height: 40px;
    text-align: center;
}
.slip:nth-of-type(1){
    border-right: 1px solid grey;
}
</style>